<html lang='zh-CN'>
        <head >
        <meta charset='utf-8'/>
<meta content='width=device-width, initial-scale=1.0' name='viewport'/>
<title >AI问答管理系统 - 对话历史管理</title>
<script src='https://res.gemcoder.com/js/reload.js'></script>
<script src='https://cdn.tailwindcss.com'></script>
<link href='https://cdn.bootcdn.net/ajax/libs/font-awesome/6.4.0/css/all.min.css' rel='stylesheet'/>
<script src='https://cdn.bootcdn.net/ajax/libs/echarts/5.4.3/echarts.min.js'></script>
<script >tailwind.config = {
  theme: {
    extend: {
      colors: {
        primary: '#3B82F6',
        // 主色调蓝色
        secondary: '#1E40AF',
        // 深蓝色
        success: '#10B981',
        // 绿色
        warning: '#F59E0B',
        // 黄色
        danger: '#EF4444',
        // 红色
        info: '#3B82F6',
        // 蓝色
        light: '#F3F4F6',
        // 浅灰色
        dark: '#1F2937' // 深灰色
      },
      fontFamily: {
        inter: ['Inter', 'sans-serif']
      }
    }
  }
};</script>
<style type='text/tailwindcss'>
        @layer utilities {
            .content-auto {
                content-visibility: auto;
            }
            .sidebar-item {
                @apply flex items-center gap-3 px-4 py-3 rounded-lg transition-all duration-200 cursor-pointer;
            }
            .sidebar-item.active {
                @apply bg-primary/10 text-primary font-medium;
            }
            .sidebar-item:not(.active):hover {
                @apply bg-gray-100;
            }
            .btn {
                @apply px-4 py-2 rounded-lg font-medium transition-all duration-200 flex items-center gap-2;
            }
            .card {
                @apply bg-white rounded-xl shadow-sm border border-gray-100 overflow-hidden;
            }
            .table-row-hover {
                @apply transition-colors duration-200 hover:bg-gray-50;
            }
        }
    </style>
    </head>
<body class='font-inter bg-gray-50 text-gray-800 flex h-screen overflow-hidden'>
        <!-- 侧边导航栏 -->
<aside class='w-64 bg-white border-r border-gray-200 flex flex-col h-full shadow-sm z-10'>
        <!-- 品牌标识 -->
<div class='p-5 border-b border-gray-200'>
        <div class='flex items-center gap-3'>
        <div class='w-10 h-10 rounded-lg bg-primary flex items-center justify-center' style='background-color:#4a90e2ff;'>
        <i class='fas fa-robot text-white text-xl'>
        </i>
    </div>
<h1 class='text-xl font-bold text-gray-800'>
        AI问答管理系统
    </h1>
    </div>
    </div>
<!-- 导航菜单 -->
<nav class='flex-1 overflow-y-auto py-4 px-3'>
        <div class='mb-6'>
        <p class='text-xs font-semibold text-gray-500 uppercase tracking-wider mb-2 px-3'>
        主菜单
    </p>
<div class='space-y-1' data-ytextravalue='extra-4schle8zx'>
        <a class='sidebar-item' data-ytindex='0' data-ytoriginindex='0' href='javascript:void(0);'>
        <i class='fas fa-tachometer-alt w-5 text-center'>
        </i>
<span >
        仪表盘
    </span>
    </a>
<a class='sidebar-item' data-ytindex='2' data-ytoriginindex='2' data-ytparentvalue='extra-4schle8zx' style='opacity: 1; color: rgb(31, 41, 55); font-family: Inter, sans-serif; font-size: 16px; font-weight: 400; font-style: normal; line-height: 24px; text-align: start; text-indent: 0px;'>
        <i class='fas fa-file-alt w-5 text-center'>
        </i>
<span >
        文档管理
    </span>
    </a>
<a class='sidebar-item active' data-ytindex='1' data-ytoriginindex='1' href='javascript:void(0);' style='background-color: rgb(219, 234, 254); color: white;'>
        <i class='fas fa-history w-5 text-center text-primary'>
        </i>
<span data-yteditvalue='历史对话' style='color:#4A90E2FF;'>
        历史对话
    </span>
    </a>
<a class='sidebar-item' data-ytindex='3' data-ytoriginindex='3' href='javascript:void(0);'>
        <i class='fas fa-users w-5 text-center'>
        </i>
<span >
        用户管理
    </span>
    </a>
<a class='sidebar-item' data-ytindex='4' data-ytoriginindex='4' href='javascript:void(0);'>
        <i class='fas fa-lock w-5 text-center'>
        </i>
<span >
        权限管理
    </span>
    </a>
    </div>
    </div>
<div class='mb-6'>
        <p class='text-xs font-semibold text-gray-500 uppercase tracking-wider mb-2 px-3'>
        系统
    </p>
<div class='space-y-1'>
        <a class='sidebar-item' href='javascript:void(0);'>
        <i class='fas fa-cog w-5 text-center'>
        </i>
<span >
        系统设置
    </span>
    </a>
<a class='sidebar-item' href='javascript:void(0);'>
        <i class='fas fa-question-circle w-5 text-center'>
        </i>
<span >
        帮助中心
    </span>
    </a>
    </div>
    </div>
<!-- AI能力配置卡片 -->
<div class='mt-8 p-4 bg-primary/5 rounded-xl' data-selectorname='#id-dfnyq'>
        <div class='flex items-center gap-3 mb-3'>
        <i class='fas fa-lightbulb text-primary text-xl'>
        </i>
<h3 class='font-medium'>
        AI能力配置
    </h3>
    </div>
<p class='text-sm text-gray-600 mb-4'>
        调整AI模型参数和RAG配置以优化问答效果
    </p>
<a class='btn btn-primary w-full justify-center border-2 border-primary/30' href='javascript:void(0);' style='background-color: rgb(59, 130, 246);'>
        <i class='fas fa-sliders-h text-white'>
        </i>
<span data-yteditvalue='配置模型' style='color:#FFFFFFFF;'>
        配置模型
    </span>
    </a>
    </div>
    </nav>
    </aside>
<!-- 主内容区域 -->
<div class='flex-1 flex flex-col overflow-hidden'>
        <!-- 顶部工具栏 -->
<header class='bg-white border-b border-gray-200 h-16 flex items-center justify-between px-6 shadow-sm z-10'>
        <div class='flex items-center gap-4'>
        <button class='lg:hidden text-gray-500 hover:text-gray-700' id='sidebar-toggle'>
        </button>
<div class='relative'>
        </div>
    </div>
<div class='flex items-center gap-4'>
        <div class='relative'>
        <div class='flex items-center gap-6' data-selectorname='#id-1x411'>
        <button class='relative text-gray-500 hover:text-primary transition-colors'>
        <i class='fas fa-bell text-xl'>
        </i>
<span class='absolute -top-1 -right-1 w-4 h-4 bg-danger rounded-full text-white text-xs flex items-center justify-center'>
        3
    </span>
    </button>
<button class='relative text-gray-500 hover:text-primary transition-colors'>
        <i class='fas fa-envelope text-xl'>
        </i>
<span class='absolute -top-1 -right-1 w-4 h-4 bg-primary rounded-full text-white text-xs flex items-center justify-center'>
        5
    </span>
    </button>
<div class='flex items-center gap-3 cursor-pointer group'>
        <img alt='用户头像' class='w-10 h-10 rounded-full object-cover border-2 border-transparent group-hover:border-primary transition-all' src='https://design.gemcoder.com/staticResource/echoAiSystemImages/d5b746e6df920d562920498d632da9fe.png'/>
<div class='hidden md:block'>
        <p class='font-medium'>
        管理员
    </p>
<p class='text-xs text-gray-500'>
        系统管理员
    </p>
    </div>
<i class='fas fa-chevron-down text-xs text-gray-500 group-hover:text-primary transition-colors'>
        </i>
    </div>
    </div>
    </div>
    </div>
    </header>
<!-- 页面内容 -->
<main class='flex-1 overflow-y-auto p-6 bg-gray-50'>
        <div class='max-w-7xl mx-auto'>
        <!-- 页面标题 -->
<div class='mb-6'>
        <h1 class='text-[clamp(1.5rem,3vw,2rem)] font-bold text-gray-800'>
        对话历史管理
    </h1>
<p class='text-gray-500 mt-1'>
        查看和管理用户的所有对话记录，支持搜索、筛选和导出
    </p>
    </div>
<!-- 筛选工具栏 -->
<div class='bg-white rounded-xl shadow-sm border border-gray-100 p-4 mb-6'>
        <div class='grid grid-cols-1 md:grid-cols-4 gap-4'>
        <div >
        <label class='block text-sm font-medium text-gray-700 mb-1'>
        时间范围
    </label>
<select class='w-full px-4 py-2 rounded-lg border border-gray-300 focus:outline-none focus:ring-2 focus:ring-primary/50 focus:border-primary text-sm'>
        <option >
        全部时间
    </option>
<option >
        今天
    </option>
<option >
        昨天
    </option>
<option >
        过去7天
    </option>
<option >
        过去30天
    </option>
<option >
        本月
    </option>
<option >
        上月
    </option>
<option >
        自定义范围
    </option>
    </select>
    </div>
<div >
        <label class='block text-sm font-medium text-gray-700 mb-1'>
        用户类型
    </label>
<select class='w-full px-4 py-2 rounded-lg border border-gray-300 focus:outline-none focus:ring-2 focus:ring-primary/50 focus:border-primary text-sm'>
        <option >
        全部用户
    </option>
<option >
        普通用户
    </option>
<option >
        VIP用户
    </option>
<option >
        管理员
    </option>
    </select>
    </div>
<div >
        <label class='block text-sm font-medium text-gray-700 mb-1'>
        可信度评分
    </label>
<select class='w-full px-4 py-2 rounded-lg border border-gray-300 focus:outline-none focus:ring-2 focus:ring-primary/50 focus:border-primary text-sm'>
        <option >
        全部评分
    </option>
<option >
        高 (>90%)
    </option>
<option >
        中 (70%-90%)
    </option>
<option >
        低 (
<70%)
    </option>
    </select>
    </div>
<div class='flex items-end'>
        <button class='btn bg-primary text-white hover:bg-primary/90 w-full'>
        <i class='fas fa-filter'>
        </i>
<span >
        应用筛选
    </span>
    </button>
    </div>
    </div>
    </div>
<!-- 对话统计卡片 -->
<div class='grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-4 mb-6'>
        <div class='card p-5'>
        <div class='flex items-start justify-between'>
        <div >
        <p class='text-sm text-gray-500 mb-1'>
        总对话数
    </p>
<h3 class='text-2xl font-bold text-gray-800'>
        128,453
    </h3>
<p class='text-sm text-success mt-2 flex items-center'>
        <i class='fas fa-arrow-up mr-1'>
        </i>
12.5%
<span class='text-gray-500 ml-1'>
        较上月
    </span>
    </p>
    </div>
<div class='w-12 h-12 rounded-lg bg-primary/10 flex items-center justify-center'>
        <i class='fas fa-comments text-primary text-xl'>
        </i>
    </div>
    </div>
    </div>
<div class='card p-5'>
        <div class='flex items-start justify-between'>
        <div >
        <p class='text-sm text-gray-500 mb-1'>
        有效回答率
    </p>
<h3 class='text-2xl font-bold text-gray-800'>
        96.8%
    </h3>
<p class='text-sm text-success mt-2 flex items-center'>
        <i class='fas fa-arrow-up mr-1'>
        </i>
2.3%
<span class='text-gray-500 ml-1'>
        较上月
    </span>
    </p>
    </div>
<div class='w-12 h-12 rounded-lg bg-success/10 flex items-center justify-center'>
        <i class='fas fa-check-circle text-success text-xl'>
        </i>
    </div>
    </div>
    </div>
<div class='card p-5'>
        <div class='flex items-start justify-between'>
        <div >
        <p class='text-sm text-gray-500 mb-1'>
        平均对话时长
    </p>
<h3 class='text-2xl font-bold text-gray-800'>
        4.2 分钟
    </h3>
<p class='text-sm text-danger mt-2 flex items-center'>
        <i class='fas fa-arrow-down mr-1'>
        </i>
0.5 分钟
<span class='text-gray-500 ml-1'>
        较上月
    </span>
    </p>
    </div>
<div class='w-12 h-12 rounded-lg bg-warning/10 flex items-center justify-center'>
        <i class='fas fa-clock text-warning text-xl'>
        </i>
    </div>
    </div>
    </div>
<div class='card p-5'>
        <div class='flex items-start justify-between'>
        <div >
        <p class='text-sm text-gray-500 mb-1'>
        平均可信度
    </p>
<h3 class='text-2xl font-bold text-gray-800'>
        87.3%
    </h3>
<p class='text-sm text-success mt-2 flex items-center'>
        <i class='fas fa-arrow-up mr-1'>
        </i>
2.8%
<span class='text-gray-500 ml-1'>
        较上月
    </span>
    </p>
    </div>
<div class='w-12 h-12 rounded-lg bg-info/10 flex items-center justify-center'>
        <i class='fas fa-chart-line text-info text-xl'>
        </i>
    </div>
    </div>
    </div>
    </div>
<!-- 对话历史表格 -->
<div class='card mb-6'>
        <div class='p-5 border-b border-gray-100'>
        <h2 class='text-lg font-bold text-gray-800'>
        对话历史记录
    </h2>
    </div>
<div class='overflow-x-auto'>
        <table class='w-full'>
        <thead >
        <tr class='bg-gray-50'>
        <th class='px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider'>
        ID
    </th>
<th class='px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider'>
        用户
    </th>
<th class='px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider'>
        对话主题
    </th>
<th class='px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider'>
        时间
    </th>
<th class='px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider'>
        可信度
    </th>
<th class='px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider'>
        状态
    </th>
<th class='px-6 py-3 text-right text-xs font-medium text-gray-500 uppercase tracking-wider'>
        操作
    </th>
    </tr>
    </thead>
<tbody class='divide-y divide-gray-100'>
        <!-- 对话记录行 -->
<tr class='table-row-hover'>
        <td class='px-6 py-4 whitespace-nowrap text-sm text-gray-900'>
        #AH-8452
    </td>
<td class='px-6 py-4 whitespace-nowrap'>
        <div class='flex items-center gap-3'>
        <img alt='用户头像' class='w-8 h-8 rounded-full object-cover' src='https://design.gemcoder.com/staticResource/echoAiSystemImages/5fcc272ab07badd473077af3d3e4c86a.png'/>
<div >
        <div class='text-sm font-medium text-gray-900'>
        张明
    </div>
<div class='text-xs text-gray-500'>
        普通用户
    </div>
    </div>
    </div>
    </td>
<td class='px-6 py-4 text-sm text-gray-700 max-w-xs truncate'>
        <a class='hover:text-primary' href='javascript:void(0);'>
        如何使用RAG技术构建智能问答系统
    </a>
    </td>
<td class='px-6 py-4 whitespace-nowrap text-sm text-gray-500'>
        2023-11-15 14:32
    </td>
<td class='px-6 py-4 whitespace-nowrap'>
        <span class='px-2 py-1 text-xs rounded-full bg-success/10 text-success'>
        92%
    </span>
    </td>
<td class='px-6 py-4 whitespace-nowrap'>
        <span class='px-2 py-1 text-xs rounded-full bg-green-100 text-green-800'>
        已完成
    </span>
    </td>
<td class='px-6 py-4 whitespace-nowrap text-right text-sm font-medium'>
        <div class='flex items-center justify-end gap-2'>
        <button class='text-primary hover:text-primary/80' title='查看详情'>
        <i class='fas fa-eye'>
        </i>
    </button>
<button class='text-gray-500 hover:text-gray-700' title='导出对话'>
        <i class='fas fa-file-export'>
        </i>
    </button>
<button class='text-gray-500 hover:text-gray-700' title='删除对话'>
        <i class='fas fa-trash-alt'>
        </i>
    </button>
    </div>
    </td>
    </tr>
<tr class='table-row-hover'>
        <td class='px-6 py-4 whitespace-nowrap text-sm text-gray-900'>
        #AH-8451
    </td>
<td class='px-6 py-4 whitespace-nowrap'>
        <div class='flex items-center gap-3'>
        <img alt='用户头像' class='w-8 h-8 rounded-full object-cover' src='https://design.gemcoder.com/staticResource/echoAiSystemImages/ed4932d3fe4c60690086d0bec527aa85.png'/>
<div >
        <div class='text-sm font-medium text-gray-900'>
        李华
    </div>
<div class='text-xs text-gray-500'>
        VIP用户
    </div>
    </div>
    </div>
    </td>
<td class='px-6 py-4 text-sm text-gray-700 max-w-xs truncate'>
        <a class='hover:text-primary' href='javascript:void(0);'>
        前端框架比较：React vs Vue vs Angular
    </a>
    </td>
<td class='px-6 py-4 whitespace-nowrap text-sm text-gray-500'>
        2023-11-15 13:45
    </td>
<td class='px-6 py-4 whitespace-nowrap'>
        <span class='px-2 py-1 text-xs rounded-full bg-success/10 text-success'>
        89%
    </span>
    </td>
<td class='px-6 py-4 whitespace-nowrap'>
        <span class='px-2 py-1 text-xs rounded-full bg-green-100 text-green-800'>
        已完成
    </span>
    </td>
<td class='px-6 py-4 whitespace-nowrap text-right text-sm font-medium'>
        <div class='flex items-center justify-end gap-2'>
        <button class='text-primary hover:text-primary/80' title='查看详情'>
        <i class='fas fa-eye'>
        </i>
    </button>
<button class='text-gray-500 hover:text-gray-700' title='导出对话'>
        <i class='fas fa-file-export'>
        </i>
    </button>
<button class='text-gray-500 hover:text-gray-700' title='删除对话'>
        <i class='fas fa-trash-alt'>
        </i>
    </button>
    </div>
    </td>
    </tr>
<tr class='table-row-hover'>
        <td class='px-6 py-4 whitespace-nowrap text-sm text-gray-900'>
        #AH-8450
    </td>
<td class='px-6 py-4 whitespace-nowrap'>
        <div class='flex items-center gap-3'>
        <img alt='用户头像' class='w-8 h-8 rounded-full object-cover' src='https://design.gemcoder.com/staticResource/echoAiSystemImages/d7eb15a61afdf034030d2b69d6386e63.png'/>
<div >
        <div class='text-sm font-medium text-gray-900'>
        王强
    </div>
<div class='text-xs text-gray-500'>
        普通用户
    </div>
    </div>
    </div>
    </td>
<td class='px-6 py-4 text-sm text-gray-700 max-w-xs truncate'>
        <a class='hover:text-primary' href='javascript:void(0);'>
        企业数据安全防护最佳实践
    </a>
    </td>
<td class='px-6 py-4 whitespace-nowrap text-sm text-gray-500'>
        2023-11-15 11:20
    </td>
<td class='px-6 py-4 whitespace-nowrap'>
        <span class='px-2 py-1 text-xs rounded-full bg-yellow-100 text-yellow-800'>
        75%
    </span>
    </td>
<td class='px-6 py-4 whitespace-nowrap'>
        <span class='px-2 py-1 text-xs rounded-full bg-green-100 text-green-800'>
        已完成
    </span>
    </td>
<td class='px-6 py-4 whitespace-nowrap text-right text-sm font-medium'>
        <div class='flex items-center justify-end gap-2'>
        <button class='text-primary hover:text-primary/80' title='查看详情'>
        <i class='fas fa-eye'>
        </i>
    </button>
<button class='text-gray-500 hover:text-gray-700' title='导出对话'>
        <i class='fas fa-file-export'>
        </i>
    </button>
<button class='text-gray-500 hover:text-gray-700' title='删除对话'>
        <i class='fas fa-trash-alt'>
        </i>
    </button>
    </div>
    </td>
    </tr>
<tr class='table-row-hover'>
        <td class='px-6 py-4 whitespace-nowrap text-sm text-gray-900'>
        #AH-8449
    </td>
<td class='px-6 py-4 whitespace-nowrap'>
        <div class='flex items-center gap-3'>
        <img alt='用户头像' class='w-8 h-8 rounded-full object-cover' src='https://design.gemcoder.com/staticResource/echoAiSystemImages/68c587da23fba70c018e76a4b242c531.png'/>
<div >
        <div class='text-sm font-medium text-gray-900'>
        赵敏
    </div>
<div class='text-xs text-gray-500'>
        管理员
    </div>
    </div>
    </div>
    </td>
<td class='px-6 py-4 text-sm text-gray-700 max-w-xs truncate'>
        <a class='hover:text-primary' href='javascript:void(0);'>
        系统性能优化建议和方案
    </a>
    </td>
<td class='px-6 py-4 whitespace-nowrap text-sm text-gray-500'>
        2023-11-15 09:45
    </td>
<td class='px-6 py-4 whitespace-nowrap'>
        <span class='px-2 py-1 text-xs rounded-full bg-red-100 text-red-800'>
        68%
    </span>
    </td>
<td class='px-6 py-4 whitespace-nowrap'>
        <span class='px-2 py-1 text-xs rounded-full bg-yellow-100 text-yellow-800'>
        需审核
    </span>
    </td>
<td class='px-6 py-4 whitespace-nowrap text-right text-sm font-medium'>
        <div class='flex items-center justify-end gap-2'>
        <button class='text-primary hover:text-primary/80' title='查看详情'>
        <i class='fas fa-eye'>
        </i>
    </button>
<button class='text-gray-500 hover:text-gray-700' title='导出对话'>
        <i class='fas fa-file-export'>
        </i>
    </button>
<button class='text-gray-500 hover:text-gray-700' title='删除对话'>
        <i class='fas fa-trash-alt'>
        </i>
    </button>
    </div>
    </td>
    </tr>
<tr class='table-row-hover'>
        <td class='px-6 py-4 whitespace-nowrap text-sm text-gray-900'>
        #AH-8448
    </td>
<td class='px-6 py-4 whitespace-nowrap'>
        <div class='flex items-center gap-3'>
        <img alt='用户头像' class='w-8 h-8 rounded-full object-cover' src='https://design.gemcoder.com/staticResource/echoAiSystemImages/4e402eb7932840c3461967bacb553cbd.png'/>
<div >
        <div class='text-sm font-medium text-gray-900'>
        刘伟
    </div>
<div class='text-xs text-gray-500'>
        普通用户
    </div>
    </div>
    </div>
    </td>
<td class='px-6 py-4 text-sm text-gray-700 max-w-xs truncate'>
        <a class='hover:text-primary' href='javascript:void(0);'>
        深度学习模型训练步骤和注意事项
    </a>
    </td>
<td class='px-6 py-4 whitespace-nowrap text-sm text-gray-500'>
        2023-11-14 18:30
    </td>
<td class='px-6 py-4 whitespace-nowrap'>
        <span class='px-2 py-1 text-xs rounded-full bg-success/10 text-success'>
        88%
    </span>
    </td>
<td class='px-6 py-4 whitespace-nowrap'>
        <span class='px-2 py-1 text-xs rounded-full bg-green-100 text-green-800'>
        已完成
    </span>
    </td>
<td class='px-6 py-4 whitespace-nowrap text-right text-sm font-medium'>
        <div class='flex items-center justify-end gap-2'>
        <button class='text-primary hover:text-primary/80' title='查看详情'>
        <i class='fas fa-eye'>
        </i>
    </button>
<button class='text-gray-500 hover:text-gray-700' title='导出对话'>
        <i class='fas fa-file-export'>
        </i>
    </button>
<button class='text-gray-500 hover:text-gray-700' title='删除对话'>
        <i class='fas fa-trash-alt'>
        </i>
    </button>
    </div>
    </td>
    </tr>
    </tbody>
    </table>
    </div>
<!-- 分页 -->
<div class='px-6 py-4 border-t border-gray-100 flex items-center justify-between'>
        <div class='text-sm text-gray-500'>
        显示
<span class='font-medium'>
        1
    </span>
到
<span class='font-medium'>
        5
    </span>
条，共
<span class='font-medium'>
        128,453
    </span>
条记录
    </div>
<div class='flex items-center gap-2'>
        <button class='px-3 py-1 rounded border border-gray-300 text-gray-500 hover:bg-gray-50 disabled:opacity-50 disabled:cursor-not-allowed' disabled>
        <i class='fas fa-chevron-left text-xs'>
        </i>
    </button>
<button class='px-3 py-1 rounded border border-primary bg-primary text-white'>
        1
    </button>
<button class='px-3 py-1 rounded border border-gray-300 text-gray-700 hover:bg-gray-50'>
        2
    </button>
<button class='px-3 py-1 rounded border border-gray-300 text-gray-700 hover:bg-gray-50'>
        3
    </button>
<button class='px-3 py-1 rounded border border-gray-300 text-gray-700 hover:bg-gray-50'>
        4
    </button>
<button class='px-3 py-1 rounded border border-gray-300 text-gray-700 hover:bg-gray-50'>
        5
    </button>
<button class='px-3 py-1 rounded border border-gray-300 text-gray-500 hover:bg-gray-50'>
        <i class='fas fa-chevron-right text-xs'>
        </i>
    </button>
    </div>
    </div>
    </div>
<!-- 对话趋势和可信度分析 -->
<div class='grid grid-cols-1 lg:grid-cols-2 gap-6 mb-6'>
        <!-- 对话趋势图表 -->
<div class='card'>
        <div class='p-5 border-b border-gray-100'>
        <h2 class='text-lg font-bold text-gray-800'>
        对话趋势分析
    </h2>
    </div>
<div class='p-5'>
        <div class='w-full h-80' id='conversation-trend-chart'>
        </div>
    </div>
    </div>
<!-- 可信度分布图表 -->
<div class='card'>
        <div class='p-5 border-b border-gray-100'>
        <h2 class='text-lg font-bold text-gray-800'>
        回答可信度分布
    </h2>
    </div>
<div class='p-5'>
        <div class='w-full h-80' id='confidence-distribution-chart'>
        </div>
    </div>
    </div>
    </div>
    </div>
    </main>
    </div>
<!-- 对话详情模态框 -->
<div class='fixed inset-0 bg-black/50 flex items-center justify-center z-50 hidden' id='conversation-modal'>
        <div class='bg-white rounded-xl shadow-lg w-full max-w-4xl max-h-[90vh] overflow-hidden flex flex-col'>
        <!-- 模态框头部 -->
<div class='p-5 border-b border-gray-200 flex items-center justify-between'>
        <div >
        <h3 class='text-lg font-bold text-gray-800'>
        对话详情
    </h3>
<p class='text-sm text-gray-500'>
        ID: #AH-8452 | 2023-11-15 14:32
    </p>
    </div>
<button class='text-gray-500 hover:text-gray-700' id='close-modal'>
        <i class='fas fa-times text-xl'>
        </i>
    </button>
    </div>
<!-- 模态框内容 -->
<div class='flex-1 overflow-y-auto p-5'>
        <div class='mb-6'>
        <div class='flex items-center gap-3 mb-4'>
        <img alt='用户头像' class='w-10 h-10 rounded-full object-cover' src='https://design.gemcoder.com/staticResource/echoAiSystemImages/5fcc272ab07badd473077af3d3e4c86a.png'/>
<div >
        <div class='font-medium text-gray-900'>
        张明
    </div>
<div class='text-xs text-gray-500'>
        普通用户
    </div>
    </div>
    </div>
<!-- 对话内容 -->
<div class='space-y-6'>
        <div class='flex gap-4'>
        <div class='flex-shrink-0'>
        <div class='w-8 h-8 rounded-full bg-gray-200 flex items-center justify-center'>
        <i class='fas fa-user text-gray-500'>
        </i>
    </div>
    </div>
<div class='flex-1'>
        <div class='bg-gray-100 rounded-lg rounded-tl-none p-4'>
        <p class='text-gray-800'>
        你好，我想了解如何使用RAG技术构建智能问答系统。能给我详细介绍一下吗？
    </p>
    </div>
<div class='text-xs text-gray-500 mt-1 ml-2'>
        14:32:15
    </div>
    </div>
    </div>
<div class='flex gap-4 justify-end'>
        <div class='flex-1 text-right'>
        <div class='inline-block bg-primary/10 rounded-lg rounded-tr-none p-4 max-w-[80%]'>
        <p class='text-gray-800'>
        当然可以！RAG（检索增强生成）是一种结合信息检索和生成式AI的技术，能有效提升问答系统的准确性和可靠性。构建RAG智能问答系统主要包括以下几个步骤：
    </p>
<ul class='list-disc list-inside mt-2 space-y-1 text-gray-700 text-sm'>
        <li >
        1. 数据收集和预处理
    </li>
<li >
        2. 文档分块和向量化
    </li>
<li >
        3. 向量数据库构建
    </li>
<li >
        4. 检索模块实现
    </li>
<li >
        5. 生成模型集成
    </li>
<li >
        6. 系统评估和优化
    </li>
    </ul>
    </div>
<div class='text-xs text-gray-500 mt-1 mr-2 inline-block'>
        14:32:48
<span class='ml-2 px-1.5 py-0.5 bg-success/10 text-success text-[10px] rounded'>
        可信度: 92%
    </span>
    </div>
    </div>
<div class='flex-shrink-0'>
        <div class='w-8 h-8 rounded-full bg-primary flex items-center justify-center'>
        <i class='fas fa-robot text-white'>
        </i>
    </div>
    </div>
    </div>
<div class='flex gap-4'>
        <div class='flex-shrink-0'>
        <div class='w-8 h-8 rounded-full bg-gray-200 flex items-center justify-center'>
        <i class='fas fa-user text-gray-500'>
        </i>
    </div>
    </div>
<div class='flex-1'>
        <div class='bg-gray-100 rounded-lg rounded-tl-none p-4'>
        <p class='text-gray-800'>
        在文档向量化过程中，有哪些推荐的模型？性能和效率如何平衡？
    </p>
    </div>
<div class='text-xs text-gray-500 mt-1 ml-2'>
        14:33:22
    </div>
    </div>
    </div>
<div class='flex gap-4 justify-end'>
        <div class='flex-1 text-right'>
        <div class='inline-block bg-primary/10 rounded-lg rounded-tr-none p-4 max-w-[80%]'>
        <p class='text-gray-800'>
        文档向量化常用的模型包括：
    </p>
<ul class='list-disc list-inside mt-1 space-y-1 text-gray-700 text-sm'>
        <li >
        <strong >
        OpenAI Embeddings
    </strong>
- 性能最佳但需要API调用，成本较高
    </li>
<li >
        <strong >
        BERT
    </strong>
- 较好的平衡性能和效率，适合中等规模应用
    </li>
<li >
        <strong >
        Sentence-BERT
    </strong>
- 专为句子和段落嵌入优化，速度快
    </li>
<li >
        <strong >
        ERNIE
    </strong>
- 百度开发的模型，对中文支持较好
    </li>
<li >
        <strong >
        Minilm
    </strong>
- 轻量级模型，速度极快但性能略有下降
    </li>
    </ul>
<p class='mt-2 text-gray-800'>
        性能和效率平衡建议：
    </p>
<ul class='list-disc list-inside space-y-1 text-gray-700 text-sm'>
        <li >
        对关键文档使用高精度模型，普通文档使用轻量级模型
    </li>
<li >
        考虑模型量化和蒸馏技术减小模型体积和加速推理
    </li>
<li >
        实现缓存机制减少重复向量化计算
    </li>
<li >
        可根据业务需求动态选择不同模型
    </li>
    </ul>
    </div>
<div class='text-xs text-gray-500 mt-1 mr-2 inline-block'>
        14:34:15
<span class='ml-2 px-1.5 py-0.5 bg-success/10 text-success text-[10px] rounded'>
        可信度: 94%
    </span>
    </div>
    </div>
<div class='flex-shrink-0'>
        <div class='w-8 h-8 rounded-full bg-primary flex items-center justify-center'>
        <i class='fas fa-robot text-white'>
        </i>
    </div>
    </div>
    </div>
    </div>
    </div>
    </div>
<!-- 模态框底部 -->
<div class='p-5 border-t border-gray-200 flex items-center justify-end gap-3'>
        <button class='btn bg-gray-100 text-gray-700 hover:bg-gray-200'>
        <i class='fas fa-file-export'>
        </i>
<span >
        导出对话
    </span>
    </button>
<button class='btn bg-primary text-white hover:bg-primary/90'>
        <i class='fas fa-check'>
        </i>
<span >
        关闭
    </span>
    </button>
    </div>
    </div>
    </div>
<script >// 页面加载时初始化
document.addEventListener('DOMContentLoaded', function () {
  // 侧边栏切换功能
  var sidebarToggle = document.getElementById('sidebar-toggle');
  var aside = document.querySelector('aside');
  sidebarToggle.addEventListener('click', function () {
    aside.classList.toggle('-translate-x-full');
  });

  // 初始化对话趋势图表
  var trendChart = echarts.init(document.getElementById('conversation-trend-chart'));
  var trendOption = {
    title: {
      text: '近30天对话量趋势',
      left: 'center',
      textStyle: {
        fontSize: 14,
        color: '#4B5563'
      }
    },
    tooltip: {
      trigger: 'axis',
      axisPointer: {
        type: 'shadow'
      }
    },
    grid: {
      left: '3%',
      right: '4%',
      bottom: '3%',
      containLabel: true
    },
    xAxis: {
      type: 'category',
      data: ['10/15', '10/20', '10/25', '10/30', '11/5', '11/10', '11/15'],
      axisLine: {
        lineStyle: {
          color: '#E5E7EB'
        }
      },
      axisLabel: {
        color: '#6B7280'
      }
    },
    yAxis: {
      type: 'value',
      axisLine: {
        show: false
      },
      axisLabel: {
        color: '#6B7280'
      },
      splitLine: {
        lineStyle: {
          color: '#F3F4F6'
        }
      }
    },
    series: [{
      name: '对话量',
      type: 'line',
      data: [3200, 3800, 4200, 3900, 4500, 5200, 4800],
      smooth: true,
      itemStyle: {
        color: '#6366F1'
      },
      lineStyle: {
        color: '#6366F1'
      },
      areaStyle: {
        color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
          offset: 0,
          color: 'rgba(99, 102, 241, 0.3)'
        }, {
          offset: 1,
          color: 'rgba(99, 102, 241, 0)'
        }])
      }
    }, {
      name: '活跃用户',
      type: 'bar',
      data: [1200, 1400, 1500, 1350, 1600, 1800, 1700],
      itemStyle: {
        color: '#3B82F6'
      },
      barWidth: 8
    }]
  };
  trendChart.setOption(trendOption);

  // 初始化可信度分布图表
  var confidenceChart = echarts.init(document.getElementById('confidence-distribution-chart'));
  var confidenceOption = {
    title: {
      text: '回答可信度分布',
      left: 'center',
      textStyle: {
        fontSize: 14,
        color: '#4B5563'
      }
    },
    tooltip: {
      trigger: 'item'
    },
    legend: {
      orient: 'vertical',
      left: 'left',
      textStyle: {
        color: '#6B7280'
      }
    },
    series: [{
      name: '可信度分布',
      type: 'pie',
      radius: ['40%', '70%'],
      avoidLabelOverlap: false,
      itemStyle: {
        borderRadius: 4,
        borderColor: '#fff',
        borderWidth: 2
      },
      label: {
        show: false,
        position: 'center'
      },
      emphasis: {
        label: {
          show: true,
          fontSize: 16,
          fontWeight: 'bold'
        }
      },
      labelLine: {
        show: false
      },
      data: [{
        value: 65,
        name: '高 (>90%)',
        itemStyle: {
          color: '#10B981'
        }
      }, {
        value: 25,
        name: '中 (70%-90%)',
        itemStyle: {
          color: '#F59E0B'
        }
      }, {
        value: 10,
        name: '低 (<70%)',
        itemStyle: {
          color: '#EF4444'
        }
      }]
    }]
  };
  confidenceChart.setOption(confidenceOption);

  // 窗口大小变化时重绘图表
  window.addEventListener('resize', function () {
    trendChart.resize();
    confidenceChart.resize();
  });

  // 模态框交互
  var modal = document.getElementById('conversation-modal');
  var closeModal = document.getElementById('close-modal');
  var viewButtons = document.querySelectorAll('button[title="查看详情"]');
  viewButtons.forEach(function (button) {
    button.addEventListener('click', function () {
      modal.classList.remove('hidden');
      document.body.style.overflow = 'hidden';
    });
  });
  closeModal.addEventListener('click', function () {
    modal.classList.add('hidden');
    document.body.style.overflow = '';
  });

  // 点击模态框外部关闭
  modal.addEventListener('click', function (e) {
    if (e.target === modal) {
      modal.classList.add('hidden');
      document.body.style.overflow = '';
    }
  });
});</script>
    </body>
    </html>